<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="healthQuestion relative box-border h-screen w-auto bg-cover">
    <div class="z-999 ml-20rpx flex items-center" @click="navTo('/pages-health/healthDetail')">
      <uni-icons type="back" size="24" />
    </div>
    <div class="relative mb-326rpx">

      <div class="font-alimamaShuHeiTi absolute left-154rpx top-102rpx mb-16rpx text-44rpx font-600 text-hex-333333">
        看看你需要测试的类型~
      </div>
    </div>
    <div class="relative text-hex-32302F">
      <div class="absolute left-80rpx right-74rpx top-0 h-596rpx flex items-center justify-center border-2rpx border-hex-6ED3BC rounded-1/2 border-solid bg-hex-E5F3A1">
        <div class="h-460rpx w-460rpx flex items-center justify-center border-2rpx border-hex-6ED3BC rounded-1/2 border-solid bg-hex-ABCD05">
          <div class="h-298rpx w-298rpx flex items-center justify-center border-4rpx border-hex-6ED3BC rounded-1/2 border-solid bg-hex-FFFDF2">
            <image
              :src="`${cdnUrl}/imgs/healthProgramme/health.png${imgVersion}`"
              mode="scaleToFill"
              class="h-156rpx w-154rpx"
            />
          </div>
        </div>
      </div>
      <div class="absolute left-430rpx h-44rpx w-44rpx rounded-50% bg-hex-ABCD05 -top-10rpx" />
      <div class="absolute left-158rpx top-506rpx h-44rpx w-44rpx rounded-50% bg-hex-C47AE0" />
      <div class="absolute right-146rpx top-492rpx h-24rpx w-24rpx rounded-50% bg-hex-70CDB8" />
      <div class="absolute left-270rpx top-164rpx h-32rpx w-32rpx rounded-50% bg-hex-DE885D" />
      <div class="mt-8rpx flex">
        <div class="relative ml-102rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('7', problemList['7'])">
          {{ problemList['7'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/sleep.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
        <div class="relative ml-60rpx mt-42rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('6', problemList['6'])">
          {{ problemList['6'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/Skin-problems.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
      </div>
      <div class="mt-78rpx flex">
        <div class="relative ml-14rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('4', problemList['4'])">
          {{ problemList['4'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/Overweight-problem.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
        <div class="relative ml-182rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('1', problemList['1'])">
          {{ problemList['1'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/Physiological-period.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
      </div>
      <div class="mt-66rpx flex">
        <div class="relative ml-56rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('5', problemList['5'])">
          {{ problemList['5'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/Hair.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
        <div class="relative ml-86rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('2', problemList['2'])">
          {{ problemList['2'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/Immunity.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
      </div>
      <div class="mt-80rpx flex justify-center">
        <div class="relative ml-60rpx box-border inline-block h-92rpx rounded-56rpx bg-hex-fffffe pl-32rpx pr-108rpx text-28rpx font-bold leading-92rpx"
             @click="getEvaluationsList('3', problemList['3'])">
          {{ problemList['3'] }}
          <div class="boxshadow absolute right-0 top-0 box-border h-92rpx w-92rpx rounded-50% bg-hex-ffffff p-5rpx">
            <image
              :src="`${cdnUrl}/imgs/health/stomach.png${imgVersion}`"
              mode="scaleToFill"
              class="h-82rpx w-82rpx"
            />
          </div>
        </div>
      </div>
      <!-- <button type="default" size="mini">睡眠问题</button>
      <button type="default" size="mini">皮肤问题</button> -->
    </div>
    <div class="fixed bottom-72rpx left-32rpx right-32rpx" @click="getEvaluationsList('8', '体质问题')">
      <div class="box-border flex items-center justify-between border-2rpx border-hex-abcd03 rounded-40rpx border-dotted p-32rpx">
        <div>
          <div class="mb-12rpx text-32rpx font-bold text-hex-32302F">体质类型测评</div>
          <div class="text-24rpx text-hex-7C8699">想知道你的身体属于什么体质吗?</div>
        </div>
        <div class="btn-theme-bg h-56rpx w-176rpx rounded-50rpx text-center text-28rpx leading-56rpx">立即测评</div>
      </div>
    </div>
    <confirm ref="confrimPop" />
  </div>
</template>

<script setup lang="ts">
let searchBarTop: any = $ref('24')
let params: any = $ref()
onLoad((options: any) => {
  params = JSON.parse(decodeURIComponent(options.params))

  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
//返回按钮
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}

let confrimPop: any = $ref()
let spliceIndex: any = $ref(0)
// 根据类型获取最新的测评状态
const getEvaluationsList = async (type, name) => {
  const reqData = {
    method: 'post',
    headers: { 'timestamp': new Date().getTime() },
    data: {
      'question_category_id': type,
    },
  }
  const { status, data } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  // 区分是否答题完成
  if (data.result.dataList.length && data.result.dataList[0].status === 0) {
    confrimPop.showConfirm('是否继续答题', { sure: '是', cancle: '否' }).then(res => {
      // 区分用户选择是与否
      if (res) {
        // console.log(res, '对')
        recordId = data.result.dataList[0].id
        spliceIndex = data.result.dataList[0].question_id
        // 区分体质
        if (type === '8') {
          navTo(`/pages-health/healthPhiQuestionDetail?questionType=${type}&evaluationId=${recordId}&&sex=${params.sex}&spliceIndex=${spliceIndex}`)
        } else {
          navTo(`/pages-health/healthQuestionDetail?questionType=${type}&evaluationId=${recordId}&spliceIndex=${spliceIndex}`)
        }
      } else {
        // console.log(res, '否')
        answerQuestion(type, name)
      }
    })
  } else {
    answerQuestion(type, name)
  }
}

let recordId: any = $ref('')
const answerQuestion = async (type, name) => {
  if (!params) {
    return
  }
  const reqData = {
    method: 'put',
    data: {
      question_category_id: type, //问题类型编码
      question_category_name: name, //问题类型名字
      question_id: 0, //问题编码
      questionnaire_id: null, //问卷编码
      question_option_id: null, //问题选项编码
      status: 0,
      general_status: 0,
    },
  }
  const { data, status, error } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  recordId = data.result[0]
  params.evaluation_id = recordId
  submitInfo(type, recordId)
}

const submitInfo = async (type, id) => {
  const reqData = {
    method: 'put',
    data: params,
  }
  const { status, data } = await Fetch('/api/s/health/infos', reqData)
  if (status !== 200 || data.code !== 0) {
    uni.showModal({ title: '温馨提示', content: '服务器处理异常,请稍后再试', showCancel: false })
    return
  }
  if (type === '8') {
    navTo(`/pages-health/healthPhiQuestionDetail?questionType=${type}&evaluationId=${id}&sex=${params.sex}&spliceIndex=0`)
    return
  }
  navTo(`/pages-health/healthQuestionDetail?questionType=${type}&evaluationId=${id}&spliceIndex=0`)
}
//定义七大问题
let problemList = $ref({
  '1': null,
  '2': null,
  '3': null,
  '4': null,
  '5': null,
  '6': null,
  '7': null,
})
onMounted(async () => {
  const { status, data } = await Fetch('/api/s/t/health_question_category',
    { method: 'post', headers: { 'timestamp': new Date().getTime() } })
  if (status !== 200 || data.code !== 0) {
    uni.showModal({ title: '温馨提示', content: '服务器处理异常,请稍后再试', showCancel: false })
    return
  }
  data.result.dataList.forEach(item => problemList[item.id] = item.name)
})
</script>

<style lang="scss" scoped>

.healthQuestion{
  background: url('https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/imgs/healthProgramme/questions.png') no-repeat center;
  background-size: 100%;

  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }

  .boxshadow{
    box-shadow: 0rpx 0rpx 38rpx 0rpx rgb(24 167 134 / 36%);
  }
}
</style>
